<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>${fns:getConfig('productName')}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="description about your site" />
<link rel="shortcut icon" href="${static}/assets/img/favicon.html">

<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="${static}/assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${static}/assets/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="${static}/assets/css/animate/animate.css" />
<link rel="stylesheet" type="text/css" href="${static}/assets/css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="${static}/assets/css/style.css" />
<link rel="stylesheet" type="text/css" href="${static}/bootstrapvalidator/css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css" href="${static}/jquery-jbox/2.3/Skins/Blue/jbox.css" />
<!-- End CSS Files -->
<script type="text/javascript" src="${static}/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="${static}/jquery-jbox/2.3/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="${static}/common/common.js"></script>

<style>
#login-wechat{
	position: absolute;
	z-index: 99999;
	width: 100%;
	height: 100%;
	top: 0;
	display: none;
}

#login-wechat-back-mask{
	background-color: #000000;
	width: 100%;
	height: 100%;
	filter:alpha(opacity=30);  /* ie 有效*/
	-moz-opacity:0.3; /* Firefox  有效*/
	opacity: 0.3; /* 通用，其他浏览器  有效*/
	text-align: center;
}

#timg{
	height: 100%;
}

#qr-area{
	width: 100%;
	height: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
}
</style>
</head>
<body class="login">
	<div id="login-wechat">
		<div id="login-wechat-back-mask">
		</div>
		<div id="qr-area">
			<img id="timg">
			<div style="background-color: #fff; width: 230px; height: 265px; display: inline-block">
				<img src="/wechat/api/getLoginQR" style="width: 230px; height: 230px; background-color: #fff">
				<br/>	
				<span style="font-size: 16px">微信扫码登录</span>
			</div>
		</div>
	</div>

	<!-- 提示信息 -->
	<sys:message content="${message}" type="error"/>
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
				<div class="form-container">
					<div class="top-wrapper">
						<div class="avatar-container">
							<img src="${static}/assets/img/people/anonymous.png" id="avatar" class="avatar animated bounceIn" alt="avatar">
						</div>
					</div>
					<div class="bottom-wrapper">
						<form id="login-form" class="login-form" action="/sys/login?u=${urlString}" method="post">
							<div class="form-group has-feedback">
								<input type="text" class="form-control" placeholder="请输入用户名" autofocus="" name="username">
								<span class="fa fa-user form-control-feedback"></span>
							</div>
							<div class="form-group has-feedback">
								<input type="password" class="form-control" placeholder="请输入密码" name="password">
								<span class="fa fa-unlock-alt form-control-feedback"></span>
							</div>
							<%-- <c:if test="${isValidateCodeLogin}">
								<div class="form-group">
									<sys:validateCode name="validateCode" imageCssStyle="height: 20px;"/>
								</div>
							</c:if> --%>
							<div class="form-group">
								<div class="checkbox">
									<label>
										<input type="checkbox" name="rememberMe" ${rememberMe ? 'checked' : ''}> 记住帐号?
									</label>
								</div>
							</div>
							<div class="form-group">
								<button type="submit" class="btn btn-green btn-block btn btn-primary" >登录</button>
							</div>
							<div class="form-group">
								<hr>
							</div>
							<div class="form-group text-center">
								
								<!-- <div>
									<a href="forget.html">Forget your password?</a>
								</div> -->
								<div>
									<a href="${web }/register/homePage?u=${urlString}">注册</a>
								</div>
								<hr>
							</div>
							<div class="form-group ">
								<div>
									<span>用其他账号登录：</span>
									<a class="qqLogin"  href="#"  onclick='toLoginQQ()'><img src="${static }/assets/img/qq/Connect_logo_1.png"> </a>
									<a class="wechatLogin"  href="#"  onclick='toLoginWechat()'><img src="${static }/assets/img/wechat/login-weixin.png"> </a>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Javascripts -->
	<script type="text/javascript" src="${static}/assets/js/Bootstrap/bootstrap.min.js"></script>
	<script type="text/javascript" src="${static}/bootstrapvalidator/js/bootstrapValidator.min.js" ></script>
	<script type="text/javascript" src="${static}/bootstrapvalidator/js/language/zh_CN.js" ></script>
 
	<!-- End Javascripts -->
	<script type="text/javascript">
		var ctx = '${ctx}', ctxStatic='${static}';
		var _hmt = _hmt || [];
		$(document).ready(function() {
		    $('#login-form').bootstrapValidator({
		        message: '请输入完整信息',
		        fields: {
		        	username: {
		                validators: {
		                    notEmpty: {
		                        message: '请输入用户名'
		                    }
		                }
		            },
		            password: {
		                validators: {
		                    notEmpty: {
		                        message: '请输入密码'
		                    }
		                }
		            }
		            <c:if test="${isValidateCodeLogin}">
		            ,
		            validateCode: {
		                validators: {
		                    notEmpty: {
		                        message: '请输入验证码'
		                    }
		                }
		            }
		            </c:if>
		        }
		    });
			 	  
	});
	 
		function toLoginQQ(){
			var A=window.open("https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id="+${app_Id}+"&redirect_uri=${fns:urlEncode(redirect_uri)}&scope=${scope}","TencentLogin");
		}

		function checkLogin(){
			var okk = false;
			$.ajax({
				url: "/wechat/api/loginQRQuery",
				method:"GET",
				async : false,
				success: function(data){
					data = eval("(" + data + ")");

					if(data.status == "success"){
						if(data.msg.result=="succ"){
							toURL(data.msg.url);
							okk = true;
						}
					}
				}
			});

			if(!okk && $("#login-wechat").is(":visible")) setTimeout('checkLogin()', 500);
		}

		function toLoginWechat(){
			setTimeout('checkLogin()', 500);
			$("#login-wechat").show();
		}

		$(function(){
			$("#login-wechat").click(function(){
				$("#login-wechat").hide();
			});
		});
/* 	$(function(){
	    $.ajax({  
	          type: 'GET',  
	          url: 'https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id='+${app_id}+'&client_secret='+${app_key}+'&code='+${code}+'&state=test&redirect_uri=http://7842c411.ngrok.io/web/qqLogin',  
	          async: false,  
	          dataType: "jsonp",  
	          jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)  
	          jsonpCallback:"callback",  
	          success: function(o){  
	              console.log(o);//o就是上面提到的返回包  
	              $.ajax({  
	                  type: 'POST',  
	                  url:"${web}/qqLogin",  
	                  data:{url: 'https://graph.qq.com/user/get_user_info?'+accessToken+'&oauth_consumer_key=101307402&openid='+o.openid},  
	                  async: false,  
	                  dataType: "json",  
	                  success: function(e){  
	                      alert(e.nickname);  
	                      console.log(e);  
	                      $("#userImg").attr("src",e.figureurl_qq_2);  
	                  }  
	            });  
	          }  
	    }); 
	 }); */ 
	</script>
</body>
</html>
